<template>
  <div class="title-wrap">
    <div class="title-item">
      设施服务
      <span class="en">amenities</span>
    </div>
    <div class="text-wrap">
      <div
        v-for="item in FacilityServicesList"
        :key="item"
        class="text-item"
        v-if="isShow"
      >
        <div class="service">
          <div :class="`iconfont ${item.icon}`" class="icon"></div>
          <div class="service-title">{{ item.title }}</div>
        </div>
        <div class="text-right">
          <div
            v-for="textList in item.textList.slice(0, 4)"
            :key="textList"
            class="text-right-item"
          >
            <div class="iconfont icon-dagou1"></div>
            <div class="text-content">{{ textList }}</div>
          </div>
        </div>
      </div>
      <div class="more" @click="show" v-if="isShow">
        展开全部设施
        <span class="iconfont icon-xiala"></span>
      </div>
      <div
        v-for="item in FacilityServicesList"
        :key="item"
        class="text-item2"
        v-if="!isShow"
      >
        <div class="service2">
          <div :class="`iconfont ${item.icon}`" class="icon2"></div>
          <div class="service-title2">{{ item.title }}</div>
        </div>
        <div class="text-right2">
          <div
            v-for="textList in item.textList"
            :key="textList"
            class="text-right-item2"
          >
            <div class="iconfont icon-dagou1"></div>
            <div class="text-content2">{{ textList }}</div>
          </div>
        </div>
      </div>
      <div class="more" @click="show" v-if="!isShow">收起</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FacilityServices",
};
</script>

<script setup>
import { ref } from "vue";
const isShow = ref(true);
const show = () => {
  isShow.value = !isShow.value;
};
const FacilityServicesList = [
  {
    title: "服务",
    icon: "icon-BAI-wuzi",
    textList: [
      "自助入住",
      "付费停车",
      "行李寄存",
      "免费瓶装水",
      "可长租",
      "管家式服务",
      "支持团建会议",
    ],
  },
  {
    title: "居家",
    icon: "icon-WIFI",
    textList: [
      "WiFi",
      "分体式空调",
      "吹风机",
      "热水壶",
      "洗衣机",
      "冰箱",
      "中央空调",
      "电视",
      "暖气",
      "有线网络",
      "书桌",
      "晾衣架",
      "茶几",
      "装饰画",
      "休闲椅",
      "地毯",
      "真皮/实木沙发",
      "遮光窗帘",
      "工作区域",
      "独立客厅",
      "鞋柜",
      "衣柜",
    ],
  },
  {
    title: "卫浴",
    icon: "icon-bathroom",
    textList: [
      "独立卫浴",
      "拖鞋",
      "牙具",
      "毛巾",
      "纸巾",
      "热水淋浴",
      "智能马桶",
      "一次性洗漱品",
      "沐浴露",
      "洗发水",
      "浴巾",
      "一次性拖鞋",
      "梳子",
      "香皂",
      "干湿分离",
      "浴帽",
      "浴霸",
      "剃须刀",
    ],
  },
  {
    title: "建筑",
    icon: "icon-shangxia",
    textList: ["电梯", "窗户", "阳台", "落地窗", "江景"],
  },
  {
    title: "娱乐",
    icon: "icon-94",
    textList: ["投影"],
  },
  {
    title: "卫生",
    icon: "icon-xishougui",
    textList: [
      "床品每客一换",
      "打扫工具",
      "消毒洗手液",
      "新风系统",
      "一次性毛巾",
      "防臭地漏",
      "空气清新剂",
      "蚊香",
      "杀虫剂",
      "白色床品",
    ],
  },
  {
    title: "安全",
    icon: "icon-buhuanlingdengjizhengshu",
    textList: [
      "智能门锁",
      "门禁系统",
      "灭火器",
      "防滑垫",
      "公共监控",
      "插座盖",
    ],
  },
  {
    title: "周边",
    icon: "icon-songshu",
    textList: [
      "菜市场",
      "公园",
      "超市",
      "餐厅",
      "药店",
      "提款机",
      "公共花园",
      "儿童乐园",
      "健身房",
      "泳池",
    ],
  },
];
</script>
<style scoped>
.title-wrap {
  width: 718px;
  margin: 40px 0 12px 0;
}
.title-item {
  font-size: 24px;
  color: #252626;
  font-weight: 900;
  position: relative;
  margin-bottom: 15px;
}
.en {
  position: absolute;
  top: 0;
  font-size: 10px;
  margin-left: 4px;
  font-style: italic;
  color: #d0d4d7;
  text-align: top;
  text-transform: uppercase;
  font-weight: 500;
}
.text-wrap {
  width: 678px;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
}
.text-item {
  width: 50%;
  padding: 10px;
  display: flex;
  box-sizing: border-box;
}
.text-right {
  display: flex;
}
.service,
.service2 {
  width: 63px;
  margin-right: 35px;
}
.icon,
.icon2 {
  font-size: 25px;
}
.service-title,
.service-title2 {
  font-size: 14px;
  color: #333;
}
.icon-dagou1 {
  color: #fff;
  width: 12px;
  height: 12px;
  font-size: 12px;
  border-radius: 50%;
  background-color: #3fd2a1;
}
.text-right {
  display: flex;
  width: 221px;
  flex-wrap: wrap;
  align-items: center;
}
.text-right-item,
.text-right-item2 {
  width: 110px;
  margin: 5px 0;
  display: flex;
  box-sizing: border-box;
  align-items: center;
}
.text-content,
.text-content2 {
  padding-left: 8px;
  font-size: 14px;
  color: #333;
}
.more {
  font-size: 12px;
  color: #00aaff;
  cursor: pointer;
}
.more .icon-xiala {
  color: #fff;
  background-color: #00aaff;
  border-radius: 50%;
  font-size: 12px;
}
.text-item2 {
  width: 658px;
  padding: 10px;
  display: flex;
}
.text-right2 {
  display: flex;
  width: 560px;
  flex-wrap: wrap;
}
.text-right-item2 {
  display: flex;
}
</style>
